<template>
	<view class="page detail bgf5" v-if="order != null">
		<view class="head px20 py40">
			<view class="fs18 white">{{order.status}}</view>
			<!-- 			<view class="mt4" v-if="order.status == '待支付'">剩余27分39秒自动关闭</view>
 -->
		</view>
		<view @click="onOpenPopup" class="bgff pl18 pr10 r8 shadow flex flexC mx12 mt-20">
			<image class="location" src="/static/img/icons/local.png" mode="widthFix"></image>
			<view class="mr10 flex1 py12 ml20">
				<view class="fs16"><text class="mr12">{{address.name}}</text><text>{{address.phone}}</text></view>
				<view class="mt6 fs12">
					{{address.province}}{{address.city}}{{address.area}}{{address.detail}}
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="bgff p12 mt10">
			<view v-for="(item,idx) in goods" class="flex flexS py10">
				<image class="logo bgf5 r6" :src="item.image" mode="aspectFill"></image>
				<view class="flex1 mx10">
					<view class="ellipsis2 fs12">{{item.goods_name}}</view>
					<view class="mt8 fs12 c8e"></view>
				</view>
				<view class="aliR">
					<view class="">￥{{item.goods_price}}</view>
					<view class="mb40">×{{item.total_num}}</view>
					<text @click="buyAgain(item)" class="bor r40 px12 py4">再次购买</text>
				</view>
			</view>
			<view class="py16 flex flexB flexC">
				<text>商品总价</text><text class="cbd ml12">￥{{order.total_price}}</text>
			</view>
			<view class="pb16 flex flexB flexC">
				<text>运费</text><text class="cbd ml12">￥{{order.express_price}}</text>
			</view>
			<view class="p8 bgf5 r4 flex flexB flexC">
				<text>实付</text><text class="cf2 ml12">￥{{order.pay_price}}</text>
			</view>
		</view>
		<view class="bgff p12 mt10 mb48 c59 fs12">
			<view class="flex flexC">
				<text class="w-4">订单编号:</text>
				<text class="flex1">{{order.order_no}}</text>
				<text @click="copyOrder" class="bgd0 r40 px10 py2 c00">复制</text>
			</view>
			<view class="flex flexC mt14">
				<text class="w-4">创建时间:</text>
				<text class="flex1">{{order.createtime}}</text>
			</view>
			<!-- <view class="flex flexC mt14">
				<text class="w-4">订单类型:</text>
				<text class="flex1">普通订单</text>
			</view> -->
			<!-- <view class="flex flexC mt14">
				<text class="w-4">返现金额:</text>
				<text class="flex1">￥4.54</text>
			</view> -->
			<!-- <view class="flex flexC mt14">
				<text class="w-4">返现时间:</text>
				<text class="flex1">付款后立即返现</text>
			</view> -->
			<!-- <view class="flex flexC mt14">
				<text class="w-4">预计积分:</text>
				<text class="flex1">7126</text>
			</view> -->
		</view>
		<view class="flex flexC flexJC fixed bgff py10 pl12 shadow">
			<text v-if="order.status == '待收货'" class="bor r40 px12 py4 mr8">查看物流</text>
			<text @click="cancel" v-if="order.status == '待支付'" class="bor r40 px12 py4 mr8">取消订单</text>
			<text @click="pay" v-if="order.status == '待支付'" class="bgff0 r40 px12 py4">去付款</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNo: '',
				address: {},
				goods: [],
				order: null
			};
		},
		onLoad(option) {

			this.orderNo = option.order_no;
			console.info(this.orderNo);
			this.getDetail();
		},
		
		onShow() {
			var payStatus = uni.getStorageSync("payStatus");
			if(payStatus == 1){
				var orderNo = uni.getStorageSync("orderNo");
				console.info("=========orderNo======="+orderNo)
				uni.removeStorageSync("payStatus");
				uni.removeStorageSync("orderNo");
				this.getDetail();
			}
		},
		methods: {

			buyAgain(item) {


				uni.navigateTo({
					url: '../goods/detail?id=' + item.goods_id
				})
			},

			pay() {
				let that = this;
				let param = {
					order_no: this.orderNo
				};
				this.$api.caiPay(param).then(res => {

					console.info(res);
					if (res.code == 1) {


						that.orderNo = res.data.order_no;
						uni.setStorageSync("orderNo",that.orderNo)
						
						uni.openEmbeddedMiniProgram({
							appId: res.data.appId,
							path: res.data.path,
							success(res) {
								// 打开成功
							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						});

					}

				})
			},

		

			cancel() {
				let that = this;
				let param = {
					order_no: this.orderNo
				};
				this.$api.cancelOrder(param).then(res => {

					console.info(res);
					if (res.code == 1) {
						that.getDetail();

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						});

					}

				})
			},

			copyOrder() {
				uni.setClipboardData({
					data: this.orderNo,
					success: () => {
						uni.showToast({ //提示
							title: '复制成功'
						})
					},
				})
			},

		


			getDetail() {
				let that = this;
				let param = {
					orderNo: this.orderNo
				};
				this.$api.caiOrderDetail(param).then(res => {

					console.info(res);
					if (res.code == 1) {
						that.order = res.data.order;
						that.address = res.data.address;
						that.goods = res.data.goods;

					} else {

					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		.location {
			width: 80upx;
		}

		.white {
			color: #FFF;
		}

		.bgef {
			background-color: #EFEFEF;
		}

		.logo {
			width: 168upx;
			height: 168upx;
		}

		.ellipsis1 {
			width: 400upx;
		}

		.avatar {
			width: 38upx;
			height: 38upx;
		}

		.bgd0 {
			background-color: #D0D0D0;
		}

		.btn {
			width: 236upx;
			height: 72upx;
			line-height: 72upx;
		}

		.head {
			background: linear-gradient(to bottom, #FD449B, #FD449B, #FD449B);
			color: #533F26;
		}

		.mt-20 {
			position: relative;
			margin-top: -50rpx;
		}

		.fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
		}

		.mb48 {
			margin-bottom: 96rpx;
		}
	}
</style>